<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
  </head>
  <style>
    /* 
    一.浮动导致的问题
      - 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
      - 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
      - 解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）
      - 清浮动的目的是
        - 让父元素计算总高度的时候，把浮动子元素的高度算进去
    二.解决浮动的办法
      1.给固定高度
      2.clear:both/left/right
      3.<br clear="all">    
     */
    .container {
      width: 1100px;
      /* height: 218px; */
      background-color: pink;
      margin: 0 auto;
    }

    h3 {
      /* line-height: 30px; */
    }

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      /* 
      让所有的浮动元素都能排在一行，margin-right:-10px
       */
      margin-right: -10px;
    }

    ul>li {
      width: 220px;
      height: 167px;
      /* background-color: red; */
      float: left;
      border: 1px solid #ccc;
      text-align: center;
      margin-right: -1px;
    }

    ul>li>img {
      margin-top: 20px;
    }

    /* 
    清除浮动最优写法：伪元素放进类里
     */
    .clear-fix::after {
      content: '';
      clear: both;
      display: block
    }
  </style>

  <body>
    <div class="container clear-fix">
      <h3>热卖品牌</h2>
        <ul>
          <li><img src="../image/nike.jpg" alt=""></li>
          <li><img src="../image/under.jpg" alt=""></li>
          <li><img src="../image/adidas.jpg" alt=""></li>
          <li><img src="../image/s.jpg" alt=""></li>
          <li><img src="../image/newbalance.jpg" alt=""></li>
        </ul>
    </div>
    <!-- <div style="clear:both"></div> -->
    <!-- <br clear="all"> -->
    <p>
      美国的纽交所，终究还是坚持要中国三大电信运营商在该所的存托股票退市。

      中国移动、中国电信、中国联通三大运营商都有在港股上市，美股上市的股份比例非常低。纽交所要求这几家中国企业退市的行为，打压的象征意义更大。在此背景下，中国电信更是向A股递交了上市申请。
    </p>
  </body>

</html>